<!-- template inhertance -->
<extend name="layout/layui24"/>

<!-- styles -->
<block name="linkcss">
    <!--日期-->
    <link rel="stylesheet" href="/Public/home/css/bootstrap-datetimepicker.min.css">

    <link rel="stylesheet" href="/Public/home/css/samples/index.css">
</block>

<!-- scripts -->
<block name="linkjs">
    <!--日期-->
    <script src="/Public/home/js/bootstrap-datetimepicker.js"></script>
    <script src="/Public/home/js/bootstrap-datetimepicker.zh-CN.js"></script>

</block>

<!-- page title -->
<block name="webtitle">
    <title>样品管理</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
        <li class="active">样品管理</li>
    </ol>
</block>

<!-- main body -->
<block name="content">
    <!--  button  -->
    <div>
        <button type="button" class="layui-btn layui-btn-primary" id="filter">
            <i class="icon-th-list"></i>
            筛选
            <i class="icon-caret-down"></i>
        </button>
        <a href="/Samples/create" class="layui-btn layui-btn-primary">
            <i class="icon-plus"></i> 样品订单申请
        </a>
        <a href="/Samples/summaries" class="layui-btn layui-btn-primary">
            <i class="icon-list"></i> 样品汇总
        </a>
    </div>

    <!--  filter  -->
    <div class="filter">
        <form action="" class="layui-form">
            <div class="form-filter">
                <div class="layui-form-item">
                    <label class="layui-form-label">订单号</label>
                    <div class="layui-input-block">
                        <input type="text" name="order" class="layui-input" placeholder="请输入订单号">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">创建人</label>
                    <div class="layui-input-block">
                        <select name="sales" lay-search>
                            <option value=""></option>
                            <volist name="sales" id="vo">
                                <option value="{$vo.value}">{$vo.name}</option>
                            </volist>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="create_time" class="layui-input" placeholder="创建时间">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="submit">提交</button>
                    <button class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!--  samples  -->
    <div class="samples mt-20">
        <div class="section-grey-table">
            <div class="section-title">
                <div class="samples_item">
                    <div class="samples_item-info">订单号及样品类型</div>
                    <div class="samples_item-info">产品类型及型号</div>
                    <div class="samples_item-info">订单总进度</div>
                    <div class="samples_item-info">销售人员</div>
                    <div class="samples_item-info">创建时间</div>
                </div>
            </div>
            <div class="section-body">
                <notempty name="samples">
                    <!--        start-->
                    <volist name="samples" id="vo">
                        <div class="samples_item">
                            <div class="samples_item-info">
                                <div class="order">
                                    <div><a href="/Samples/overview?id={$vo.sample_id}">{$vo.sample_order}</a></div>
                                    <eq name="vo.sample_type" value="1">
                                        <div class="tag tag-success">免费</div>
                                        <else/>
                                        <div class="tag tag-warning">付费</div>
                                    </eq>
                                </div>
                            </div>
                            <div class="samples_item-info">
                                <volist name="vo.details" id="item">
                                    <div class="products">
                                        <span>{$item.product_type}</span>
                                        <span class="ml-10">
                                                <a href="/Samples/show?id={$item.product_id}">{$item.product_model}</a>
                                                <if condition="$item['product_progress']['progress_value'] lt 10">
                                                    <span class="ml-5 tag">{$item.product_progress.progress_label}</span>
                                                    <elseif condition="$item['product_progress']['progress_value'] eq 12"/> {//若已拒绝需显示进度为已拒绝}
                                                    <span class="ml-5 tag tag-danger">已拒绝</span>
                                                    <else/>
                                                    <span class="ml-5 tag tag-success">{$item.product_progress.progress_label}</span>
                                                </if>
                                            </span>
                                    </div>
                                </volist>
                                <div class="products">
                                    <span>QSFP28~4XSFP28 AOC</span>
                                    <span class="ml-10">
                                            <a href="/Samples/show">APSP885B53CDL01-02</a>
                                            <span class="ml-5 tag">样品制作、测试</span>
                                        </span>
                                </div>
                            </div>
                            <div class="samples_item-info">
                                <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                    <eq name="vo.sample_type" value="1">
                                        <div class="layui-progress-bar layui-progress-success" lay-percent="{$vo.sample_progress}%"></div>
                                        <else/>
                                        <div class="layui-progress-bar layui-progress-warning" lay-percent="{$vo.sample_progress}%"></div>
                                    </eq>
                                </div>
                            </div>
                            <div class="samples_item-info">
                                <div class="sales">
                                    <img src="{$vo.sales_face}" alt="" class="layui-circle" width="40" height="40">
                                    <span>{$vo.sales_name}</span>
                                </div>
                            </div>
                            <div class="samples_item-info">
                                {$vo.create_time|date="Y-m-d H:i:s",###}
                            </div>
                        </div>
                    </volist>
                    <!--        end-->
                    <else/>
                    <div class="no-info"></div>
                </notempty>
            </div>
        </div>
    </div>

    <!-- 分页 -->
    <ul class="pagination pagination-edit">{$page}</ul>

</block>

<block name="scripts">
    <script>
        $(function () {
            layui.use(['form','element'],function () {
                var form = layui.form;

                //筛选框的出现与隐藏
                $("#filter").click(function () {
                    //图标变换
                    $(this).children("i:nth-child(2)").toggleClass("icon-caret-down icon-caret-up");
                    //筛选框出现隐藏
                    $(".filter").slideToggle();
                });

                //创建时间
                $("input[name=create_time]").datetimepicker({
                    language: "zh-CN",
                    format: "yyyy-mm-dd",
                    todayHighlight: true,
                    minView: "month",
                    autoclose: true,
                    todayBtn: true
                });

                //提交筛选
                form.on("submit(submit)",function (data) {
                    $.post("", data.field, function (response) {
                        if (response.code) {
                            layer.msg(response.msg,{icon: 2})
                        } else {
                            //展示筛选出的信息
                        }
                    },"json")
                })
            })
        })
    </script>
</block>